{% extends 'knowledge/base.html' %}

{% block title %}搜索结果: {{ query }} - 知识库管理系统{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <div class="flex items-center">
            {% if collection_name %}
                <a href="{% url 'knowledge:collection_detail' collection_name %}" class="text-neutral hover:text-primary mr-4">
                    <i class="fa fa-arrow-left"></i>
                </a>
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">搜索结果</h2>
                    <p class="text-neutral mt-1">
                        在集合 <span class="font-medium">{{ collection_name }}</span> 中搜索: <span class="font-medium">{{ query }}</span>
                    </p>
                </div>
            {% else %}
                <a href="{% url 'knowledge:index' %}" class="text-neutral hover:text-primary mr-4">
                    <i class="fa fa-arrow-left"></i>
                </a>
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">搜索结果</h2>
                    <p class="text-neutral mt-1">搜索全部知识库: <span class="font-medium">{{ query }}</span></p>
                </div>
            {% endif %}
        </div>
        <div class="mt-4 md:mt-0">
            <form action="{% if collection_name %}{% url 'knowledge:search_collection' collection_name %}{% else %}{% url 'knowledge:search' %}{% endif %}" method="get" class="flex">
                <input type="text" name="q" value="{{ query }}" placeholder="输入搜索关键词..."
                       class="px-4 py-2 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full md:w-64">
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary/90 transition-colors shadow-sm">
                    <i class="fa fa-search"></i>
                </button>
            </form>
        </div>
    </div>

    {% if results %}
    <div class="bg-white rounded-xl overflow-hidden card-shadow">
        <div class="p-6 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-800">找到 {{ results|length }} 个相关结果</h3>
                <div class="text-sm text-neutral">
                    排序方式: <span class="font-medium">相关性</span>
                </div>
            </div>
        </div>

        <div class="divide-y divide-gray-200">
            {% for result in results %}
            <div class="p-6 hover:bg-gray-50 transition-colors">
                <div class="flex flex-col md:flex-row md:items-start md:justify-between">
                    <div class="flex-1">
                        {% if result.metadata.collection %}
                        <div class="text-xs text-primary mb-1">
                            集合: {{ result.metadata.collection }}
                        </div>
                        {% endif %}
                        <h4 class="text-lg font-semibold text-gray-800 mb-2">
                            <a href="{% url 'knowledge:view_document' collection_name|default:result.metadata.collection result.document_id %}" class="hover:text-primary">
                                {{ result.metadata.title|default:'无标题' }}
                            </a>
                        </h4>
                        <div class="text-gray-600 text-sm mb-3">
                            {{ result.text|truncatechars:300 }}
                        </div>
                        <div class="flex flex-wrap gap-2 mt-3">
                            <a href="{% url 'knowledge:view_document' collection_name|default:result.metadata.collection result.document_id %}" class="text-primary hover:text-primary/80 text-sm">
                                <i class="fa fa-eye mr-1"></i>查看详情
                            </a>
                            <a href="{% url 'knowledge:edit_document' collection_name|default:result.metadata.collection result.document_id %}" class="text-secondary hover:text-secondary/80 text-sm">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </a>
                            <span class="text-neutral text-xs">
                                相关性: {{ result.score|floatformat:2 }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-xl p-8 text-center card-shadow">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fa fa-search text-gray-400 text-2xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-800 mb-2">未找到相关结果</h3>
        <p class="text-neutral mb-6 max-w-md mx-auto">没有找到与 "{{ query }}" 相关的文档，请尝试使用其他关键词或检查拼写</p>
        <a href="{% if collection_name %}{% url 'knowledge:collection_detail' collection_name %}{% else %}{% url 'knowledge:index' %}{% endif %}" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
            <i class="fa fa-arrow-left mr-2"></i>返回知识库
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}